<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="15">
                <el-carousel indicator-position="none" height="420px" :interval="5000">
                    <el-carousel-item v-for="item in carouselImage" :key="item.id">
                        <img style="width: 100%;height: 100%" :src="'http://www.dba.org.cn' + item.image">
                        <div class="carouselFoot">
                            <div class="footLeft">
                                <div class="footLeft1">
                                    {{ item.title}}
                                </div>
                                <div class="footLeft2">{{item.content}}</div>
                            </div>
                            <div class="footRight">{{item.sendTime}}</div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
            <el-col :span="9">
                <el-card class="box-card">
                    <div class="more" @click="gotoMore(1)">
                        更多
                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>
                    </div>
                    <el-tabs v-model="activeNameOne" @tab-click="handleClick">
                        <el-tab-pane label="协会动态" name="first">
                            <div v-for="(item, index) in xhDt" :key="index" @click="goShouldPage(item,activeNameOne)">
                                <el-row style="border-bottom: 2.2px dashed  #EEEEEE;">
                                    <el-col class="col-li" :span="2">
                                        <div class="no-li">{{ index+1}}</div>
                                    </el-col>
                                    <el-col class="col-li" :span="14">
                                        <nobr>{{ item.title }}</nobr>
                                    </el-col>
                                    <el-col class="col-li" :span="6">[{{ item.specificDate }}]</el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="协会公告" name="second">
                            <div class="scrollable" v-scroll>
                                <div class="scroll-content">
                                    <div v-for="(item, index) in xhGg" :key="index"
                                         @click="goShouldPage(item,activeNameOne)">
                                        <el-row style="border-bottom: 2.2px dashed  #EEEEEE;">
                                            <el-col class="col-li" :span="16">
                                                <nobr>{{ item.title }}</nobr>
                                            </el-col>
                                            <el-col class="col-li" :span="6">[{{ item.specificDate }}]</el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <div class="box-card-photo"></div>
                    <div class="moreOne" @click="gotoMore(2)">
                        更多
                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>
                    </div>
                    <el-tabs v-model="activeNameTwo" @tab-click="handleClick">
                        <el-tab-pane label="会员动态" name="third">
                            <div v-for="(item, index) in hyDt" :key="index" @click="goShouldPage(item,activeNameTwo)">
                                <el-row style="border-bottom: 2.2px dashed #EEEEEE;">
                                    <el-col class="col-li" :span="18">
                                        <nobr>{{ item.title }}</nobr>
                                    </el-col>
                                    <el-col class="col-li" :span="5">[{{ item.specificDate }}]</el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div style="right: 37%; top:30px;position: absolute"></div>
                    <div class="more" @click="gotoMore(3)">
                        更多
                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>
                    </div>
                    <el-tabs v-model="activeNameThree " @tab-click="handleClick">
                        <el-tab-pane label="监管政策" name="fourth">
                            <div v-for="(item, index) in jgZc" :key="index" @click="goShouldPage(item,activeNameThree)">
                                <el-row style="border-bottom: 2.2px dashed #EEEEEE;">
                                    <el-col class="col-li" :span="18">
                                        <nobr>{{ item.title }}</nobr>
                                    </el-col>
                                    <el-col class="col-li" :span="5">[{{ item.specificDate }}]</el-col>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <div class="banner2">

                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card">
                    <div class="box-card-photo" style="left: 13.3%;"></div>
                    <div class="moreOne" @click="gotoMore(4)">
                        更多
                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>
                    </div>
                    <el-tabs v-model="activeNameFour " @tab-click="handleClick">
                        <el-tab-pane label="普惠金融产品" name="fifth">
                            <el-row :gutter="20">
                                <el-col :span="8" v-for="item in hpjrCp" :key="item.id">
                                    <div style="width: 25%;position: relative;top: 21px;">sss</div>
                                    <div class="jrcp-card">
                                        <div class="jrcp-div jrcp1">{{ item.productName }}</div>
                                        <div class="jrcp-div jrcp2">{{ item.bankName }}</div>
                                        <div class="jrcp-div">
                                            <div class="jrcp3">{{ item.twoName }}</div>
                                        </div>
                                        <div class="jrcp-div jrcp4">
                                            {{ item.productIntroduce }}
                                        </div>
                                        <div class="jrcp-div jrcp5">
                                            <el-button type="primary" round @click="transferApplication"
                                                       style="box-shadow: 0 2px 8px rgba(2,135,250,0.5);">我要申请
                                            </el-button>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div style="right: 34%; top:30px;position: absolute; "></div>
                    <div class="more" @click="gotoMore(5)">
                        更多
                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>
                    </div>
                    <el-tabs v-model="activeNameFive" @tab-click="handleClick">
                        <el-tab-pane label="普惠金融政策" name="sixth">
                            <el-row v-for="(item, index) in hpjrZc" :key="index"
                                    style="border-bottom: 2.2px dashed #EEEEEE;">
                                <el-col class="col-li" :span="18">
                                    <nobr>{{ item.title }}</nobr>
                                </el-col>
                                <el-col class="col-li" :span="5">[{{ item.createTime }}]</el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>

<!--        <el-row :gutter="20">-->
<!--            <el-col :span="24">-->
<!--                <el-card class="box-card">-->
<!--                    <div class="box-card-photo"></div>-->
<!--                    <div class="more" @click="gotoMore(6)">-->
<!--                        更多-->
<!--                        <i class="el-icon-arrow-right" style="font-weight: bold;margin-left: 10px"></i>-->
<!--                    </div>-->
<!--                    <el-tabs v-model="activeNameSix" @tab-click="handleClick">-->
<!--                        <el-tab-pane label="专题活动" name="seventh" style="font-size: 20px;">-->
<!--                            <el-carousel :interval="4000" type="card">-->
<!--                                <el-carousel-item v-for="item in 6" :key="item">-->
<!--                                    <div class="cardPhoto">-->
<!--                                        <div class="cardContent">-->
<!--                                            内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容-->
<!--                                            内容-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div>-->
<!--                                        <el-row v-for="(item, index) in zthd" :key="index"-->
<!--                                                style="border-bottom: 2.2px dashed #EEEEEE; ">-->
<!--                                            <el-col class="col-li" :span="23">{{ item.content }}</el-col>-->
<!--                                        </el-row>-->
<!--                                    </div>-->
<!--                                </el-carousel-item>-->
<!--                            </el-carousel>-->
<!--                        </el-tab-pane>-->
<!--                    </el-tabs>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->

        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item1" @click="photoOne(1)"></div>
            </el-col>
            <el-col :span="8">
                <div class="item2" @click="photoOne(2)"></div>
            </el-col>

            <el-col :span="8">
                <div class="item3" @click="photoOne(3)"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        selectNewInfo,
        inclusiveFinancialPolicies,
        inclusiveFinancialProducts,
        selectImageNewsInfo
    } from '@/api/api'

    export default {
        directives: {
            scroll: {
                inserted(el) {
                    const content = el.querySelector('.scroll-content');
                    let animation;
                    function startScroll() {
                        animation = setInterval(() => {
                            if (content.scrollTop + el.clientHeight >= content.scrollHeight) {
                                // 滚动到底部时，回到顶部重新开始滚动
                                content.scrollTop = 0;
                            } else {
                                content.scrollTop += 1; // 每次滚动的距离可根据实际需求进行调整
                            }
                        }, 50); // 每次滚动的时间间隔可根据实际需求进行调整
                    }

                    function stopScroll() {
                        clearInterval(animation);
                    }
                    el.addEventListener('mouseover', stopScroll); // 鼠标悬停时停止滚动
                    el.addEventListener('mouseout', startScroll); // 鼠标移开时继续滚动
                    startScroll(); // 页面加载后开始滚动
                }
            }
        },
        data() {
            return {
                activeNameOne: 'first',
                activeNameTwo: 'third',
                activeNameThree: 'fourth',
                activeNameFour: 'fifth',
                activeNameFive: 'sixth',
                activeNameSix: 'seventh',
                queryParams: {
                    pageNum1: 1,
                    pageSize1: 6,
                    typeId: null,
                },
                xhDt: [],
                xhGg: [],
                hyDt: [],
                jgZc: [],
                hpjrCp: [],
                hpjrZc: [],
                zthd: [
                    {
                        id: '1',
                        content: '内容1',
                    },
                    {
                        id: '2',
                        content: '内容2',
                    },
                    {
                        id: '3',
                        content: '内容3',

                    },
                    {
                        id: '4',
                        content: '内容4',
                    },
                    {
                        id: '5',
                        content: '内容5',
                    },

                ],
                carouselImage:[],
            };
        },
        created() {
            this.getDynamics();
            this.getAnnouncement();
            this.getMembership();
            this.getRegulatory();
            this.getTbankProductList();
            this.getTPublicize();
            this.getHomeCarouselImage();
        },
        methods: {
            // 我要申请跳转链接
            transferApplication() {
                window.location.href = "https://www.wjx.cn/vj/wKKqcvs.aspx"
            },
            // 跳转对应页面
            goShouldPage(v, m) {
                console.log("--------------------")
                console.log(v)
                console.log(m)
                if (m == "first") {
                    this.$emit('childEvent', {'lable': "协会动态", 'zId': 2, 'sId': 20, 'sonMenu': "20", 'val': v});
                }
                if (m == "second") {
                    this.$emit('childEvent', {'lable': "协会活动", 'zId': 2, 'sId': 49, 'sonMenu': "20", 'val': v});
                }
                if (m == "third") {
                    this.$emit('childEvent', {'lable': "会员动态", 'zId': 3, 'sId': 22, 'sonMenu': "22", 'val': v});
                }
                if (m == "fourth") {
                    this.$emit('childEvent', {'lable': "监管政策", 'zId': 4, 'sId': 16686, 'sonMenu': "16686", 'val': v});
                }
            },
            // 单击
            photoOne(v) {
                if (v == 1) {
                    window.location.href = "https://www.china-cba.net/Index/lists/catid/31.html"
                } else if (v == 2) {
                    this.$emit('childEvent', {'lable': "普惠金融产品", 'zId': 6, 'sId': 37, 'sonMenu': "37"});
                } else if (v == 3) {
                    console.log("待")
                }
            },
            getHomeCarouselImage(){
                selectImageNewsInfo().then(response =>{
                    this.carouselImage = response.data
                    console.log("this.carouselImage")
                    console.log(this.carouselImage)
                })
            },
            // 查询协会动态
            getDynamics() {
                this.xhDt = [];
                this.queryParams.typeId = 4
                selectNewInfo(this.queryParams).then(response => {
                    this.xhDt = response.data
                })
            },
            // 查询协会公告
            getAnnouncement() {
                this.xhGg = [];
                this.queryParams.typeId = 27
                selectNewInfo({typeId: this.queryParams.typeId}).then(response => {
                    this.xhGg = response.data
                })
            },
            // 查询会员动态
            getMembership() {
                this.hyDt = [];
                this.queryParams.typeId = 8
                selectNewInfo(this.queryParams).then(response => {
                    this.hyDt = response.data
                })
            },
            // 查询监管政策
            getRegulatory() {
                this.jgZc = [];
                this.queryParams.typeId = 44
                selectNewInfo(this.queryParams).then(response => {
                    this.jgZc = response.data
                })
            },

            // 查询普惠金融产品
            getTbankProductList() {
                this.hpjrCp = [];
                inclusiveFinancialProducts({
                    pageNum: 1,
                    pageSize: 3
                }).then(response => {
                    this.hpjrCp = response.data
                })
            },
            // 查询普惠金融政策
            getTPublicize() {
                this.hpjrZc = [];
                inclusiveFinancialPolicies({
                    pageNum: 1,
                    pageSize: 6
                }).then(response => {
                    this.hpjrZc = response.data
                })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            gotoMore(type) {
                switch (type) {
                    case 1:
                        if (this.activeNameOne == 'first') {
                            this.$emit('childEvent', {'lable': "协会动态", 'zId': 2, 'sId': 20, 'sonMenu': "20"});
                        } else {
                            this.$emit('childEvent', {'lable': "协会公告", 'zId': 2, 'sId': 49, 'sonMenu': "49"});
                        }
                        break;
                    case 2:
                        if (this.activeNameTwo == 'third') {
                            this.$emit('childEvent', {'lable': "会员动态", 'zId': 3, 'sId': 22, 'sonMenu': "22"});
                        }
                        break;
                    case 3:
                        if (this.activeNameThree == 'fourth') {
                            this.$emit('childEvent', {'lable': "监管政策", 'zId': 4, 'sId': 16686, 'sonMenu': "16686"});
                        }
                        break;
                    case 4:
                        if (this.activeNameFour == 'fifth') {
                            this.$emit('childEvent', {'lable': "普惠金融产品", 'zId': 6, 'sId': 37, 'sonMenu': "37"});
                        }
                        break;
                    case 5:
                        //  if(this.activeNameFive == 'sixth'){
                        //     this.$emit('childEvent', {'lable':"普惠金融政策",'zId':2,'sId':49,'sonMenu':"49"});
                        // }
                        break;
                    case 6:
                        // if(this.activeNameSix == 'seventh'){
                        //     this.$emit('childEvent', {'lable':"专题活动",'zId':2,'sId':49,'sonMenu':"20"});
                        // }
                        break;
                    default:
                        break;
                }

            }
        }
    }
    ;
</script>

<style scoped>
    .scrollable {
        max-height: 320px; /* 设置最大高度 */
    }

    .scroll-content:hover {
        animation-play-state: paused; /* 鼠标悬停时暂停动画 */
    }

    .scroll-content {
        width: 100%;
        display: inline-block;
        padding: 0;
        animation: scrollAnimation 10s linear infinite;
        white-space: nowrap; /* 防止内容换行 */
    }

    @keyframes scrollAnimation {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-100%);
        }
        /* 滚动到顶部重新开始 */
    }

    .scrollable .col-li {
        display: inline-block; /* 将内容设置为内联元素 */
        white-space: nowrap; /* 防止内容换行 */
    }

    /deep/ .el-tabs__content {
        height: 320px; /* 设置容器的高度为固定值 */
    }

    /deep/ .el-carousel__container {
        height: 275px;
    }

    .cardPhoto {
        width: 100%;
        height: 200px;
        position: relative;
    }

    .cardContent {
        width: 98%;
        height: 40px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 20px;
        font-weight: 600;
        padding: 10px 0 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ffffff;
    }

    .box-card-photo {
        left: 10%;
        top: 30px;
        position: absolute
    }

    .carouselFoot {
        width: 100%;
        height: 90px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 1px;
        border-radius: 3px;
    }

    .footLeft {
        width: 50%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .footLeft1 {
        width: 96%;
        font-size: 20px;
        font-weight: 600;
        padding: 0 0 10px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ffffff;
    }

    .footLeft2 {
        width: 93%;
        color: #c1bfbf;
        font-size: 15px;
        padding: 2px 0 0 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footRight {
        width: 20%;
        color: #ffffff;
        font-size: 16px;
        flex-grow: 0;
        margin: 15px 0px 20px 50px;
        text-align: center;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #ffffff;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #ffffff;

    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix {
        display: flex;
        justify-content: space-between;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        position: relative;
        width: 100%;
        height: 420px;
        margin: 0 0 20px 0;
    }

    .moreOne {
        position: absolute;
        font-size: 12px;
        font-weight: 600;
        z-index: 1;
        top: 33px;
        right: 22px;
        color: #a0a0a0;
    }

    .more {
        position: absolute;
        right: 30px;
        top: 33px;
        font-size: 12px;
        font-weight: 600;
        z-index: 1;
        color: #a0a0a0;
    }

    /deep/ .el-link.el-link--default {
        color: #a0a0a0;
    }

    .banner2 {
        background: url('../assets/indexHome/banner2.png') no-repeat;
        background-size: 100% 100%;
        height: 196px;
        width: 100%;
    }

    .item1 {
        background: url('../assets/indexHome/item3.png') no-repeat;
        background-size: 100% 100%;
        height: 196px;
        width: 100%;
    }

    .item2 {
        background: url('../assets/indexHome/item2.png') no-repeat;
        background-size: 100% 100%;
        height: 196px;
        width: 100%;
    }

    .item3 {
        background: url('../assets/indexHome/item1.png') no-repeat;
        background-size: 100% 100%;
        height: 196px;
        width: 100%;
    }

    /deep/ .el-tabs__item {
        font-size: 18px !important;
        color: #bbbbbb;
        padding: 0 25px;
        font-weight: 600;
    }

    .col-li {
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        color: #686767;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 8px 0 8px 8px;
    }

    .no-li {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 4px;
        background: #db6f09;
    }

    .jrcp-card {
        border: 1px solid #EEEEEE;
        height: 230px;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 37px 10px 20px 20px;
    }

    .jrcp-div {
        text-align: center;
        flex: 1;
    }

    .jrcp1 {
        font-weight: bold;
        font-size: 20px;
    }

    .jrcp2 {
        font-size: 16px;
    }

    .jrcp3 {
        width: 90px;
        background: #f8efe8;
        color: #7f542d;
        font-size: 14px;
        height: 30px;
        border-radius: 7px;
        line-height: 30px;
        padding-top: 3px;
    }

    .jrcp4 {
        font-size: 13px;
        color: #b1b0b0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
    }

    .jrcp5 {
        padding-top: 10px;
    }
</style>
